<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { defineProps } from "vue";
import { string } from "vue-types";
defineOptions({
  name: "PureProgress1"
});
const props = defineProps({
  percentage: {
    type: Number,
    required: true
  }
});

const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
</script>

<template>
  <el-progress type="dashboard" :percentage="percentage">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}%</span>
      <span class="percentage-label">上传</span>
    </template>
  </el-progress>
</template>

<style scoped>
.d {
  border: 1px solid red;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress .el-progress--line {
  width: 350px;
  margin-bottom: 15px;
}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>
